<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '实名认证',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="game-hall">
    <!-- 顶部返回按钮 -->
    <view class="back-button" @click="handleBack">
      <wd-icon name="arrow-left" size="30px"></wd-icon>
    </view>
    <view class="nav-bar">
      <view class="nav-title">实名认证</view>
      <view class="subtitle">更加真实，更受欢迎</view>
      <image src="/static/images/my/checkName/logo.png" class="shield-icon"></image>
    </view>

    <!-- 内容区域 -->
    <view class="content-wrapper">
      <!-- 表单区域 -->
      <view class="form-container">
        <view class="form-title">请您使用有效身份证信息认证</view>

        <!-- 姓名输入框 -->
        <view class="input-group">
          <view class="input-label">姓名</view>
          <wd-input class="custom-class" type="text" v-model="userName" placeholder="请输入姓名" />
        </view>

        <!-- 证件号码输入框 -->
        <view class="input-group">
          <view class="input-label">证件号码</view>
          <wd-input
            class="custom-class"
            type="text"
            v-model="idCard"
            placeholder="请输入证件号码"
          />
        </view>

        <!-- 认证按钮 -->
        <button class="auth-button" @click="handleAuthentication">立即认证</button>
      </view>

      <!-- 说明文字 -->
      <view class="description">
        <wd-icon name="info-circle-filled" size="22px"></wd-icon>
        <text class="desc-text">
          实名认证用于完善为真人用户，不会对信息做任何采集与保留，请放心使用。
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 表单数据
const userName = ref('')
const idCard = ref('')

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}

// 处理认证按钮点击
const handleAuthentication = () => {
  if (!userName.value.trim()) {
    uni.showToast({
      title: '请输入姓名',
      icon: 'none',
    })
    return
  }

  if (!idCard.value.trim()) {
    uni.showToast({
      title: '请输入证件号码',
      icon: 'none',
    })
    return
  }

  // 这里可以添加身份证号码验证逻辑

  // 模拟认证成功
  uni.showToast({
    title: '认证成功',
    icon: 'success',
  })

  // 认证成功后返回上一页
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<style lang="scss">
/* 容器样式 */
.game-hall {
  min-height: 100vh;
  background-image: url('/static/images/my/checkName/checkNameBg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  padding: 20rpx;
  overflow: hidden;
}

/* 返回按钮 */
.back-button {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  color: #000000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  .back-icon {
    margin-right: 8rpx;
    font-size: 32rpx;
  }
}
/* 顶部导航 */
.nav-bar {
  position: relative;
  margin-top: 100rpx;
  padding-left: 40rpx;
}

.nav-title {
  font-size: 42rpx;
  color: #ffffff;
}

.subtitle {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 40rpx;
}

.shield-icon {
  width: 400rpx;
  height: 400rpx;
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  z-index: 10;
}
/* 内容区域 */
.content-wrapper {
  margin-top: 150rpx;
}

/* 表单区域 */
.form-container {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  position: relative;
  padding-bottom: 40rpx;
}

.form-title {
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 40rpx;
  background-color: #ecf1ff;
  height: 120rpx;
  line-height: 120rpx;
  border-radius: 20rpx 20rpx 0 0;
  padding-left: 40rpx;
  position: relative;
  font-weight: bold;
}

.input-group {
  display: flex;
  margin: 50rpx 40rpx;
  background-color: #f3f5f7;
  border-radius: 30rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  padding: 0 40rpx;
  font-weight: bold;
}

.input-label {
  color: #000000;
  margin-bottom: 10rpx;
  width: 200rpx;
  height: 90rpx;
}

.custom-class {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: none !important;
  border: none !important;
  color: #000000;
  .wd-input__inner {
    font-size: 32rpx !important;
    height: 90rpx !important;
    line-height: 90rpx !important;
  }
}

.auth-button {
  height: 96rpx;
  line-height: 96rpx;
  background: linear-gradient(90deg, #a487f2, #6171f0);
  color: #ffffff;
  font-size: 30rpx;
  border: none;
  border-radius: 40rpx;
  margin: 20rpx 40rpx;
}

.auth-button:active {
  opacity: 0.8;
}

/* 说明文字 */
.description {
  display: flex;
  align-items: flex-start;
  font-size: 24rpx;
  font-weight: bold;
  color: #999999;
  line-height: 40rpx;
  background-color: #ffffff;
  padding: 20rpx 20rpx;
}

.desc-text {
  flex: 1;
  margin-left: 10rpx;
}
</style>
